<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 Baidu, Inc. All Rights Reserved.
  -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css"
		  type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css"
		  type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/jquery-ui.css"
		  type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/css/bootstrap.min.css?v=3.3.6" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/css/font-awesome.css?v=4.4.0" type="text/css" >
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/css/plugins/bootstrap-table/bootstrap-table.min.css" type="text/css" >
	<title>库存变更明细</title>
</head>
<body class="gray-bg">
<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
<div class="topline" id="J_topline" data-til="库存变更明细">
	<nav th:replace="hjh/include::menuV"></nav>
</div>
<div class="jifen content">
	<div class="btil">
		<div class="ibox">
			<div class="ibox-body">
				<div class="fixed-table-toolbar">
					<div class="columns pull-right">
						<a href="javascript:;" class="btn" id="J_pcbtn" onclick="reLoad()">查询</a>
					</div>
					<div class="columns pull-right col-md-2 nopadding">
						<input type="text" readonly="readonly" name="" class="ctroltime" id="timeend"
							   placeholder="截止时间">
					</div>
					<div class="columns pull-right col-md-2 nopadding">
						<input type="text" readonly="readonly" name="" class="ctroltime" id="timestart"
							   placeholder="起始时间">
					</div>
					<div class="columns pull-right col-md-2 nopadding">
						<select id="status_id" class="form-control" th:value="${type}">
							<option value="0" selected="selected">选择商品类型</option>
							<option value="1">杜小栗</option>
							<option value="2">黑莓</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
	<table id="exampleTable" data-mobile-responsive="true"></table>
</div>
<nav th:replace="hjh/include::bottomV"></nav>
<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-ui.min.js"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    $(function(){

        $.datepicker.setDefaults({
            showButtonPanel: true,
            beforeShow : function( input ) {
                setTimeout(function() {
                    var buttonPane = $(input)
                        .datepicker( "widget" )
                        .find( ".ui-datepicker-buttonpane" );
                    buttonPane.html('');
                    $( "<button>", {
                        text: "清除",
                        click: function() {
                            $.datepicker._clearDate(input);
                        }
                    }).addClass("ui-state-default ui-priority-primary ui-corner-all").appendTo( buttonPane );
                }, 1 );
            }
        });

        var dateFormat = "yy-dd-mm",
            from = $( "#timestart" ).datepicker({
                defaultDate: "+1w",
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                numberOfMonths: 2
            }).on( "change", function() {
                to.datepicker( "option", "minDate", getDate( this ) );
                sort.timestart = $(this).val();
            }),
            to = $( "#timeend" ).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                dateFormat: "yy-mm-dd",
                numberOfMonths: 2
            }).on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
                sort.timeend = $(this).val();
            });

        function getDate( element ) {
            var date;
            try {
                date = $.datepicker.parseDate( dateFormat, element.value );
            } catch( error ) {
                date = null;
            }
            return date;
        };

        load();

    });

    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : "/stock/list", // 服务器数据的加载地址
                    // showRefresh : true,
                    // showToggle : true,
                    showColumns : true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"

                    queryParams : function(params) {
                        var query = {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit,
                            offset : params.offset,
                            beginDate : $("#timestart").val(),
                            beginEnd : $("#timeend").val(),
                            type : $("#status_id").val()
                            // name:$('#searchName').val(),
                            // username:$('#searchName').val()
                        };
                        return query;
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                            visible : true,
                            field : 'id',
                            title : '编号'
                        },
                        {
                            field : 'productType',
                            title : '商品类型',
                            formatter: function (value, row) {
                                if (value == 1) {
                                    return '<span class="label label-warning">杜小栗</span>';
                                } else if (value == 2) {
                                    return '<span class="label label-success">黑莓</span>';
                                } else {
                                    return '<span class="label label-success">-</span>';
								}
                            }
                        },
                        {
                            field : 'balance',
                            title : '库存余额'
                        },
                        {
                            field : 'amount',
                            title : '库存变更数'
                        },
                        {
                            field : 'remark',
                            title : '备注'
                        },
                        {
                            field : 'createTime',
                            title : '创建时间'
                        }
                    ]
                });
    }
    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }
</script>
</body>
</html>
